<template>
    <div class="login-box">
        <register></register>
      <div class="input-class">
        <div style="width: 100%;height: 10%;display: flex;justify-content: center">
        </div>
        <div class="input-box">
          <input type="text" placeholder="账号" v-model="user.username">
          <input type="password" placeholder="密码" v-model="user.password">
          <div style="display: flex;flex-flow: row;">
            <input type="text" placeholder="验证码" style="width: 60%;height: 90%" v-model="user.code">
            <img :src="imgUrl" style="height: 100%;width: 30%;margin:0 5%;" alt="" @click="captchas">
          </div>
          <div style="display: flex;justify-content: center;align-items: center">
            <button @click="reg"
                    style="height: 100%;width: 100%;
                    display: flex;justify-content: center;
                    align-items: center;
                    border-radius: 25px;
                    background: #a6c1ee;
                    color: #fbf4ea;
                    border: none">
              注册
            </button>
          </div>
        </div>
        <div style="width: 100%;height: 10%;display: flex;
        justify-content: center;
        justify-items: center;
        align-items: center">
          <routerLink :to="{name:'login',path:'/login'}">已有账号？<a style="color: white">马上返回登陆</a></routerLink>
        </div>
      </div>
    </div>
  </template>
  <script lang="ts" setup>
  import Register from "./register.vue";
  import { register, captcha } from "../../service/api";
  import {ref, onBeforeMount} from "vue";
  import {useRouter} from "vue-router";
  
  const router = useRouter()
  import {ElMessage} from 'element-plus'
  
  const user = ref({
    username: "",
    password: "",
    code: "",
    key: ""
  })
  onBeforeMount(() => {
    captchas();
  })
  const imgUrl = ref("")
  
  const reg = () => {
    if (user.value.username === '') {
      ElMessage.error("账号不能为空")
      return
    }
    if (user.value.password === '') {
      ElMessage.error("密码不能为空")
      return
    }
    if (user.value.code === '') {
      ElMessage.error("验证码不能为空")
      return
    }
    console.log(user)
    register(user.value).then(res => {
      console.log(res)
      if (res.data.code === 200) {
        window.localStorage.setItem("token", res.data.data);
        ElMessage.success("注册成功")
        router.push({name: "index"})
      } else {
        ElMessage.error(res.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
    captchas();
  }
  //图片验证码
  const captchas = () => {
    user.value.key = String(Math.random() * 100);
    captcha(user.value).then(res => {
      console.log(res)
      if (res.status === 200) {
        const blob = new Blob([res.data])
        imgUrl.value = window.URL.createObjectURL(blob);
      } else {
        ElMessage.error("服务器异常")
      }
    }).catch(err => {
      console.log(err)
    })
  }
  </script>
  <style scoped>
  .login-box {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  }
  
  .input-class {
    width: 25%;
    height: 60%;
    border: white 1px solid;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 25px;
  }
  
  .input-box {
    height: 60%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: space-between;
  }
  
  .input-box > * {
    margin: 5px 0;
    height: 15%;
    width: 80%;
  }
  
  input {
    outline: none;
    text-indent: 1rem;
    font-size: 1rem;
    background: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid #77c2dc;
  }
  
  ::-webkit-input-placeholder {
    color: white;
    opacity: 70%;
  }
  
  div > a {
    padding: 5px;
    text-decoration: none;
    color: black;
  }
  </style>